<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    	*{margin:0;padding:0;}
    	body,html{width: 100%;height:100%;}
    </style>
</head>
<body>
    <div id="vbarChart" style="width:100%;height:100%;"></div>
    <script src="../../components/echarts-4.0.4.min.js"></script>
    <script>
        var vbarChart = echarts.init(document.getElementById('vbarChart'));		  
	    var barOption = {
	     	title: {
                text: '近12月相关活动情况',
                left: 'center',
                top:'15%',
                textStyle: {
                    color: '#fff',
                    fontSize: 22
                }
            },
            backgroundColor:'#0A0F23',
		    color: ['#00ffff', '#00ffa2', '#f0e750'],
		    legend: {
		        /*orient: 'horizontal',*/
                show: false,
		        left: "5%",
		        top:'15%',
		        itemGap: 20,
		        data: ['次数'],
		        textStyle: {
		            color: '#fff',
					fontSize: 16
		        }
		    },
			grid: {
			    left: '5%',
			    right: '7%',
			    bottom: '10%',
			    top:'25%',
			    containLabel: true
			},
		    xAxis: [{
		        type: 'category',
		        boundaryGap: false,
		        //在（type: 'category'）中设置data有效
		        data: ['4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3'],
				splitLine: { //坐标轴在 grid 区域中的分隔线；
		            show: false,
		            lineStyle: { //分割线颜色，可设单个，也可以设置数组。
		                color: 'rgba(170,172,178,0.33)'
		            }
		        },
		        axisLine: { //坐标轴轴线相关设置。就是数学上的x轴
		            show: true,
		            lineStyle: {
		                color: 'rgba(170,172,178,0.53)'
		            },
		        },
		        axisLabel: {
		            textStyle: {
		                color: '#FFF',
		                fontSize: 16,
		            },
		            formatter:"{value}月"
		        }
		    }],
		    yAxis: [{
		        type: 'value',
		        min: 0,
		        max: 50,
		        splitLine: {
		            show: false,
		            lineStyle: {
		                color: 'rgba(170,172,178,0.33)'
		            }
		        },
		        axisLine: { //坐标轴轴线相关设置。就是数学上的y轴
		            show: true,
		            lineStyle: {
		                color: 'rgba(170,172,178,0.53)'
		            },
		        },
		        axisLabel: {
		            textStyle: {
		                color: 'rgba(255,255,255,0.83)',
		                fontSize: 12,
		            },
		        },
		        splitArea: {
		            show: false,
		            areaStyle: {
		                color: ['#112245', 'rgba(34,50,82,0.4)']
		            }
		        },
		        axisLabel: {
		            textStyle: {
		                color: '#FFF',
		                fontSize: 16,
		            },
		        }
		    }],
		    series: [{
                name: '次数',
                type: 'line',
                smooth: true, //是否平滑曲线显示
                lineStyle: { //线条样式 
                    normal: {
                        width: 1
                    }
                },
                areaStyle: { //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0, 255, 255, 0.9)'
                        }, {
                            offset: 0.7,
                            color: 'rgba(0, 255, 255, 0.6)'
                        }], false),
		                         shadowColor: 'rgba(0, 0, 0, 0.9)', //阴影颜色
                        shadowBlur: 10 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                },
                itemStyle: { //折现拐点标志的样式
                    normal: {
                        color: 'rgb(0,255,255)'
                    }
                },
                data: [12, 11, 43, 1, 28, 12, 1, 3, 11, 7, 17, 5]
            }/*, {
                name: '金额',
                type: 'line',
                smooth: true,
                lineStyle: {
                    normal: {
                    	width: 1
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(240, 231, 80, 0.9)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(240, 231, 80, 0.4)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.9)',
                        shadowBlur: 10
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgb(240,231,80)'
                    }
                },
                data: [1130, 2812, 1134, 2361, 3413, 1330, 1301, 594, 1230]
            }*/]
		};
        vbarChart.setOption(barOption);
    </script>
</body>
</html>